<template>
  <div class="userinfo">
    <navBar title="修改资料" @onClickLeft="onClickLeft" />
    <div class="user_img">
      <van-image
        round
        width="70px"
        height="70px"
        :src="photo"
        @click="openEditAvatar"
      />
    </div>
    <div class="user_form">
      <van-form>
        <span class="tip"><van-tag type="primary">昵称</van-tag></span>
        <van-field
          v-model="nickName"
          name="nickName"
          placeholder="请输入昵称"
        />
        <span class="tip"><van-tag type="primary">收件人姓名</van-tag></span>
        <van-field
          v-model="addressName"
          name="addressName"
          placeholder="请输入收件人姓名"
        />
        <span class="tip"><van-tag type="primary">收件人手机号</van-tag></span>
        <van-field
          v-model="addressTel"
          name="addressTel"
          placeholder="请输入收件人手机号"
        />
        <span class="tip"><van-tag type="primary">收件人地址</van-tag></span>
        <van-field
          v-model="address"
          name="address"
          placeholder="请输入收件地址"
        />
        <span class="tip"><van-tag type="primary">邮编</van-tag></span>
        <van-field
          v-model="addressPostcode"
          name="addressPostcode"
          placeholder="请输入收件地址邮编
"
        />
      </van-form>
    </div>
    <div class="btn_warp">
      <van-button type="info" class="btn" @click="sendBtn" v-no-more-click:3000
        >确定</van-button
      >
    </div>

    <editAvatar ref="editAvatar" />
  </div>
</template>

<script>
import navBar from "@cb/navBar.vue";
import { Toast, Dialog } from "vant";
import { setMyInfo, editAddress, getMyInfo } from "@/api/user";
import { getMy } from "@u/index";
import editAvatar from "@cm/b-edit-avatar.vue";
import {get} from "../../../../../public/API/query"
export default {
  components: {
    navBar,
    editAvatar
  },
  data() {
    return {
      nickName: "",
      address: "",
      token: "",
      addressName: "",
      addressTel: "",
      addressPostcode: "",
      isShow: false,
      photoPic: [],
      userInfo: {}
    };
  },
  deactivated() {
    this.$destroy(true); //销毁组件
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    // 修改资料的确定按钮
    async sendBtn() {
      let params = {
        nickname: this.nickName,
        token: this.token,
        address_name: this.addressName,
        address_tel: this.addressTel,
        address: this.address,
        address_postcode: this.addressPostcode
      };
      let Flag1 = false;
      let Flag2 = false;
      if (this.nickName !== "") {
        get('editInfo',params,async res=>{
            if (res.code == 200) {
              await getMy(this);
              Flag1 = true;
            }
        });
      }
      if (
        this.address !== "" ||
        this.addressName !== "" ||
        this.addressTel !== "" ||
        this.addressPostcode !== ""
      ) {
        get('addOrEditAddress',params,async res=>{
          if (res.code == 200) {
            await getMy(this);
            Flag2 = true;
          }
        })
      }
      switch ((Flag1, Flag2)) {
        case Flag1 == true && Flag2 == true:
          Toast.success("修改昵称和收件信息成功！");
          break;
        case Flag1 == true:
          Toast.success("修改昵称成功！");
          break;
        default:
          Toast.success("修改收件信息成功！");
      }
    },

    getUserInfo() {
      getMyInfo().then(res => {
        if (res.code == 200) {
          this.nickName = res.data.nickname;
          this.addressName = res.data.errand_info.address_name;
          this.addressTel = res.data.errand_info.address_phone;
          this.address = res.data.errand_info.address;
          this.addressPostcode = res.data.errand_info.address_postcode;
        }
      });
    },

    openEditAvatar() {
      this.$refs["editAvatar"].show();
    }
  },
  created() {
    this.token = window.sessionStorage.getItem("token");
    this.getUserInfo();
  },
  computed: {
    photo() {
      return (
        process.env.VUE_APP_BASE_URL +
        "/storage/upload/" +
        this.$store.state.user.photo
      );
    }
  },
};
</script>

<style lang="less">
.userinfo {
  .user_img {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 10%;
  }
  .user_form {
    display: flex;
    justify-content: center;
    margin-top: 10%;
    .van-cell {
      width: 325px;
      border-bottom: solid 1px #006cff;
    }
  }
  .btn_warp {
    margin-top: 10%;
    display: flex;
    justify-content: center;
    .btn {
      width: 325px;
      height: 45px;
      background: #0016ff;
      border-radius: 22.5px;
    }
  }
  .van-uploader {
    display: flex;
    justify-content: center;
    margin-top: 3%;
  }
}
</style>
